html{
    box-sizing: border-box;/*怪异盒模型*/
    min-height: 100vh;
    display: flex;/*弹性格式上下文*/
    justify-content: center;
    align-items: center;
    text-align: center;/*文本居中，行内元素居中*/
    /*vertical-align: center;/*兄弟间居中*/
}
*, *::before *::after{
    box-sizing: inherit;
}
.wrapper{
    padding: 30px;
    max-width: 350px;/*做移动端适配*/
    background-color: khaki;
    box-shadow: 0 0 0 10px black;
}
h2{
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: 100;
}
.plates{
    margin: 0;
    padding: 0;
    text-align: left;
    list-style: none;/*?*/
}
.plates li{
    border-bottom: 1px solid yellow;
    padding: 10px 0;
    font-weight: 100;
    display: flex;
}
.plates label{
    flex:1;
    cursor: pointer;/*鼠标型*/
}
.plates input{
    display: none;/*dom不会创建*/
}
.plates input + label:before{/*+相邻兄弟选择器*/
    content:"⬜";
    margin-right: 10px;
}
.plates input:checked + label:before{
    content:"✅";
}
.add-item{
    margin-top: 20px;
}
.add-item input{
    padding: 10px;
    outline: 5px solid greenyellow;
    border: 1px solid yellow;
}